// 声明多个变量来收集每个输入框的状态，0——正确，1——错误，只有全都为1，才能提交注册
// 判断过程只出现在最后的点击事件中
var n = 2,p = 2,t = 2,e = 2,y = 2
// uname失去焦点事件
u_name.onblur = function() {
	let u = u_name.value
	let xhr = new XMLHttpRequest()
	xhr.open('GET', '/v2/user/check_uname?uname=' + u)
	xhr.onload = function() {
		let result = xhr.responseText
		if (u_name.value == '') {
			msg_name.innerHTML = '用户名不为空！'
			document.getElementById("msg_name").style.color="red";
			n = 1
		} else if (!/^[a-zA-Z0-9_-]{4,16}$/.test(u_name.value)) {
			msg_name.innerHTML = '用户名格式不正确'
			document.getElementById("msg_name").style.color="red";
			n = 1
		} else if (result == "exists") {
			msg_name.innerHTML = '该用户名已被占用'
			document.getElementById("msg_name").style.color="red";
			n = 1
		} else{
			msg_name.innerHTML = '该用户名可以使用'
			document.getElementById("msg_name").style.color="#20fd20";
		}
	}
	xhr.send()
}
// uname获得焦点事件
u_name.onfocus = function() {
	n = 0
	msg_name.innerHTML = '用户名在8~16位之间'
	document.getElementById("msg_name").style.color="white";
}
//upwd失去焦点事件
u_pwd.onblur = function() {
	if (u_pwd.value == '') {
		msg_pwd.innerHTML = '密码不为空！'
		document.getElementById("msg_pwd").style.color="red";
		p = 1
	} else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/.test(u_pwd.value)) {
		msg_pwd.innerHTML = '密码格式错误'
		document.getElementById("msg_pwd").style.color="red";
		p = 1
	} else{
		msg_pwd.innerHTML = '密码格式正确！'
		document.getElementById("msg_pwd").style.color="#20fd20";
	}
}
//upwd获得焦点事件
u_pwd.onfocus = function() {
	p = 0
	msg_pwd.innerHTML = '密码长度大于8位小于16位'
	document.getElementById("msg_pwd").style.color="white";
}
//Ypwd失去焦点事件
Ypwd.onblur = function() {
	if (Ypwd.value == '') {
		msg_Ypwd.innerHTML = '确认密码不能为空！'
		document.getElementById("msg_Ypwd").style.color="red";
		y = 1
	} else if (Ypwd.value == u_pwd.value){
		msg_Ypwd.innerHTML = '两次密码输入一致'
		document.getElementById("msg_Ypwd").style.color="#20fd20";
	}
	else {
		msg_Ypwd.innerHTML = '两次密码输入不一致'
		document.getElementById("msg_Ypwd").style.color="red";
		y = 1
	}
}
//Ypwd获得焦点事件
Ypwd.onfocus = function() {
	y = 0
	msg_Ypwd.innerHTML = '请再次输入密码'
	document.getElementById("msg_Ypwd").style.color="white";
}
// phone失去焦点事件
uphone.onblur = function() {
	if (uphone.value == '') {
		msg_phone.innerHTML = '电话不为空！'
		document.getElementById("msg_phone").style.color="red";
		t = 1
	} else if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(uphone
			.value)) {
		msg_phone.innerHTML = '电话号码格式错误！'
		document.getElementById("msg_phone").style.color="red";
		t = 1
	} else{
		msg_phone.innerHTML = '电话格式正确！'
		document.getElementById("msg_phone").style.color="#20fd20";
	}
}
// phone获得焦点事件
uphone.onfocus = function() {
	t = 0
	msg_phone.innerHTML = '请输入电话号码'
	document.getElementById("msg_phone").style.color="white";
}
// email失去焦点事件
uemail.onblur = function() {
	if (uemail.value == '') {
		msg_email.innerHTML = '邮箱不为空！'
		document.getElementById("msg_email").style.color="red";
		e = 1
	} else if (!/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/
		.test(uemail.value)) {
		msg_email.innerHTML = '邮箱格式不正确！'
		document.getElementById("msg_email").style.color="red";
		e = 1
	} else{
		msg_email.innerHTML = '邮箱格式正确！'
		document.getElementById("msg_email").style.color="#20fd20";
	}
}
// email获得焦点事件
uemail.onfocus = function() {
	e = 0
	msg_email.innerHTML = '请输入邮箱'
	document.getElementById("msg_email").style.color="white";
}
//注册点击事件
btn.onclick = function() {
	console.log(n, p, y, t, e)
	if (n == 1) {
		return
	} else if (p == 1) {
		return
	} else if (y == 1) {
		return
	} else if (t == 1) {
		return
	} else if (e == 1) {
		return
	} else if (p == 2){
		msg_name.innerHTML = '用户名不为空！'
		return
	}
	
	let data =
		`uname=${u_name.value}&upwd=${u_pwd.value}&phone=${uphone.value}&email=${uemail.value}`
	let xhr = new XMLHttpRequest()
	xhr.open('POST', '/v2/user/reg')
	xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8')
	xhr.onload = function() {
		console.log(xhr.responseText)
		
		var board_0 = document.getElementById("reg_alert")
		var e_0 = document.createElement("div")
		e_0.id = `mask`
		e_0.className = `mask`
		var object = board_0.appendChild(e_0)
		
		// msg_reg.innerHTML = xhr.responseText
		var board_1 = document.getElementById("mask")
		var e_1 = document.createElement("div")
		e_1.id = `reg_suc`
		e_1.className = `reg_suc`
		var object = board_1.appendChild(e_1)

		var board_2 = document.getElementById("reg_suc")
		var e_2 = document.createElement("h2")
		e_2.id = `reg_title`
		e_2.className = `reg_title`
		e_2.innerHTML = `注册成功`
		var object = board_2.appendChild(e_2)

		var board_3 = document.getElementById("reg_suc")
		var e_3 = document.createElement("span")
		e_3.id = `reg_body`
		e_3.className = `reg_body`
		e_3.innerHTML = `点击“确定”跳转到登录页面`
		var object = board_3.appendChild(e_3)
		
		var board_4 = document.getElementById("reg_suc")
		var e_4 = document.createElement("a")
		e_4.id = `reg_a`
		e_4.className = `reg_a`
		e_4.href = `login.html`
		var object = board_4.appendChild(e_4)
		
		var board_5 = document.getElementById("reg_a")
		var e_5 = document.createElement("button")
		e_5.id = `reg_btn`
		e_5.className = `reg_btn`
		e_5.innerHTML = `确定`
		var object = board_5.appendChild(e_5)

	}
	xhr.send(data)
}
